<template>
  <div class="login">
    <!--手机号-->
    <InputGroup
      type="number"
      v-model="phone"
      placeholder="请输入手机号"
      :disabled="disabled"
      :error="errors.phone"
    />
    <!--密码-->
    <InputGroup type="number" v-model="password" placeholder="请输入密码" :disabled="disabled"/>
    <!--验证码-->
    <InputGroup
      v-model="verifyCode"
      type="number"
      placeholder="请输入验证码"
      :btnTitle="btnTitle"
      :error="errors.code"
      @btnClick="getVerifyCode"
      @handleInputChange="validateverifyCode"
    />
    <!--记住我和忘记密码-->
    <div class="login-des">
      <div>
        <span class="iconfont warm">&#xe67d;</span>记住我
      </div>
      <div>
        <a href="#">忘记密码</a>
      </div>
    </div>
    <!--登录按钮-->

    <div class="login-btn">
      <button @click="handleClick()">下一步</button>
    </div>

    <!--友情提示-->
    <div class="tips">
      <p class="tips-test">友情提示：</p>
      <p class="tips-text">如果您使用我们的订餐服务，请输入您上次使用的手机号码</p>
    </div>
    <!--订单须知-->
    <div class="notice">
      <p class="notice-one">订单须知:</p>
      <p class="notice-one">1）产品和包装以实物为准，产品均加强监测，请放心食用</p>
      <p class="notice-one">2）为保证食物质量，肯德基宅急送设有送餐范围。若您的送餐地址超出送餐范围无法送餐，敬请谅解!建议您就近选择肯德基餐厅用餐</p>
      <p class="notice-one">3）订餐时间：10:00-22:00。部分地区已开通24小时送餐服务，详情致电4008-823-823查询</p>
      <p class="notice-one">4）不设最低消费，每单收取统一外送费，谢绝小费</p>
      <p class="notice-one">5）如遭遇不可抗力因素，肯德基宅急送将暂时不提供相关服务，敬请谅解!</p>
    </div>
  </div>
</template>

<script>
import InputGroup from './InputGroup'
export default {
  name: 'HomeLogin',
  data () {
    return {
      password: '',
      phone: '',
      verifyCode: '',
      errors: {
        phone: '',
        password: '',
        code: ''
      },
      btnTitle: '发送验证码',
      disabled: false,
      timerFlg: true
    }
  },
  methods: {
    getVerifyCode () {
      if (this.validatePhone()) {
        // 如果手机号合法，发送请求
        this.validateBtn()
      }
    },
    validateBtn () {
      let time = 60
      if (this.timerFlg) {
        let timer = setInterval(() => {
          if (time === 0) {
            clearInterval(timer)
            this.btnTitle = '发送验证码'
            this.disabled = false
            this.timerFlg = true
          } else {
            // 倒计时
            this.btnTitle = time + '秒后重试'
            this.disabled = true
            time--
          }
        }, 1000)
        this.timerFlg = false
      }
    },
    validatePhone () {
      // 验证手机号码
      if (!this.phone) {
        this.errors = {
          phone: '手机号码不能为空'
        }
        return false
      } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)) {
        this.errors = {
          phone: '请填写正确的手机号码'
        }
        return false
      } else {
        this.errors = {}
        return true
      }
    },
    validateverifyCode () {
      console.log(this.verifyCode.length)
      if (this.verifyCode.length > 4) {
        this.verifyCode = ''
      }
    },
    handleClick () {
      let iPow = this.password.replace(/\s*/g, '')
      let iP = this.phone.replace(/\s*/g, '')
      if (iPow.length !== 0 && iP.length !== 0 && this.verifyCode.length !== 0) {
        // 跳转
        this.$router.push('/city')
      } else {
        alert('请全部填写！')
      }
    }
  },
  components: {
    InputGroup
  }
}
</script>

<style lang="stylus" scoped>
.login {
  width: 40%;
  margin: auto;
  margin-top: 2rem;
  padding: 0.6rem;
  box-sizing: border-box;
  text-align: center;
}

.text-group, .login-btn {
  margin-top: 30px;
}

.login-des {
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-between;
}

.login-btn button {
  width: 100%;
  height: 0.8rem;
  background-color: red;
  color: white;
  font-size: 14px;
  border: none;
  outline: none;
  margin-top: 0.4rem;
}

.tips {
  margin-top: 0.6rem;
  line-height: 0.6rem;

  .tips-test {
    display: flex;
    width: 26%;
    padding-left: 0;
  }

  .tips-text {
    width: 100%;
    display: flex;
  }
}

.notice {
  margin-left: -2rem;
  margin-top: 1rem;
  width: 16rem;
  height: 2.5rem;
  font-size: 11px;

  .notice-one {
    color: #9fa4a4;
    width: 100%;
    display: flex;
  }
}
</style>
